<template>
    <div class="box">
        <slot name="header" />
        <el-upload
            class="uploader"
            action="undefined"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handlePictureCardPreview"
            :before-upload="beforePictureUpload"
            :on-remove="handleRemove"
        >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <slot name="footer" />
    </div>
</template>

<script>
export default {
    components: {

    },
    props: ['file'],
    data () {
        return {
            imageUrl: ''
        }
    },
    computed: {

    },
    watch: {

    },
    created () {

    },
    mounted () {

    },
    methods: {
        handlePictureCardPreview ({ raw }, fileList) {
            console.log(raw, fileList)
            this.imageUrl = URL.createObjectURL(raw)
            this.$emit('update:file', raw)
        },
        beforePictureUpload (file) {
            // console.log(file)

            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },
        handleRemove () {

        }
    }
}
</script>

<style scoped lang="stylus">
_width = 148px
.box
    text-align center
.uploader
    background-color #fbfdff
    border 1px dashed #c0ccda
    border-radius 6px
    box-sizing border-box
    width _width
    height _width
    cursor pointer
    line-height _width
    vertical-align top
    margin 20px auto
    ::v-deep i
        font-size 28px
        width _width
p:last-of-type
    color #999
.avatar
    width _width - 2px
    height _width - 2px
    display block
    object-fit contain
</style>
